"use client";
import { Listbox, ListboxItem } from "@heroui/react";
import { PostWithData } from "@/prisma/queries/posts";
import { useRouter } from "next/navigation";

export default function PostList({ posts }: { posts: PostWithData[] }) {
  const router = useRouter();
  const postItems = posts.map((post) => {
    const topicName = post.topic.name;
    return (
      <ListboxItem
        key={post.id}
        description={<p className="mt-3 text-small">{post.content}</p>}
        endContent={
          <span className="text-small text-gray-400 whitespace-nowrap self-end">
            {post._count.comments} comments
          </span>
        }
        onPress={() => {
          router.push(`/topics/${topicName}/posts/${post.id}`);
        }}
      >
        {post.title}
      </ListboxItem>
    );
  });
  return (
    <Listbox
      aria-label="Posts List"
      itemClasses={{
        base: "border-small border-default-200 mt-4",
      }}
    >
      {postItems}
    </Listbox>
  );
}
